<template>
  <main>
    <h1>我的APP</h1>
    <div class="upload-app">
      <drag-upload-file
        accept=".apk,.ipa,.APK,.IPA"
        class="uploader"
        :class="uploadClass"
        @file="onDropFile"
      >
        <div>
          <el-icon :size="50">
            <upload />
          </el-icon>
        </div>
        <div>{{ uploadMessage }}</div>
      </drag-upload-file>
      <el-dialog
        title="上传APP"
        v-model="showDialog"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :show-close="false"
      >
        <app-uploader
          :file="upload.file"
          @cancel="cancelUpload"
          @success="uploadSuccess"
        />
      </el-dialog>
    </div>
    <div class="filter">
      <div
        class="filter-item"
        :class="filter == null ? 'filter-item-select' : ''"
        @click="filter = null"
      >
        全部
      </div>
      <div
        class="filter-item"
        :class="filter == 'iOS' ? 'filter-item-select' : ''"
        @click="filter = 'iOS'"
      >
        iOS
      </div>
      <div
        class="filter-item"
        :class="filter == 'Android' ? 'filter-item-select' : ''"
        @click="filter = 'Android'"
      >
        Android
      </div>
    </div>
    <transition-group name="list" tag="div" class="app-list">
      <div
        v-for="item in appList"
        :key="item.ID"
        @click="gotoAppDetail(item.Platform, item.PackageName)"
        class="app"
      >
        <div class="icon">
          <img class="icon-image" :src="item.Icon" alt="" />
          <div class="icon-title">
            {{ item.Name }}
          </div>
        </div>
        <div class="title">{{ item.VersionTitle }}</div>
        <div class="info">
          <el-row :gutter="30">
            <el-col class="info-title" :span="24" v-if="item.Platform == 'iOS'">
              version name
            </el-col>
            <el-col
              class="info-title"
              :span="24"
              v-if="item.Platform == 'Android'"
            >
              version
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22" :offset="1"> {{ item.Version }} </el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col class="info-title" :span="24" v-if="item.Platform == 'iOS'">
              build
            </el-col>
            <el-col
              class="info-title"
              :span="24"
              v-if="item.Platform == 'Android'"
            >
              version code
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="22" :offset="1">{{ item.BuildVersion }}</el-col>
          </el-row>

          <el-row :gutter="30">
            <el-col class="info-title" :span="24" v-if="item.Platform == 'iOS'">
              bundle id
            </el-col>
            <el-col
              class="info-title"
              :span="24"
              v-if="item.Platform == 'Android'"
            >
              package name
            </el-col>
          </el-row>
          <el-row :gutter="30">
            <el-col :span="22" :offset="1">{{ item.PackageName }}</el-col>
          </el-row>
        </div>

        <img
          v-if="item.Platform === 'iOS'"
          class="platform-icon"
          src="@/assets/icon_platform_ios.svg"
          :alt="item.Platform"
        />
        <img
          v-else-if="item.Platform === 'Android'"
          class="platform-icon"
          src="@/assets/icon_platform_android.svg"
          :alt="item.Platform"
        />
        <img
          v-else
          class="platform-icon"
          src="@/assets/icon_platform_unknown.svg"
          :alt="item.Platform"
        />
      </div>
    </transition-group>
  </main>
</template>

<script>
// @ is an alias to /src
import DragUploadFile from '@/components/DragUploadFile.vue'
import AppUploader from '@/components/AppUploader.vue'
import { Upload } from '@element-plus/icons'
export default {
  name: 'Home',
  components: {
    DragUploadFile,
    AppUploader,
    Upload
  },
  data () {
    return {
      filter: null,
      isError: false,
      upload: {
        file: null
      },
      appListData: []
    }
  },
  computed: {
    appList () {
      if (this.filter == null) {
        return this.appListData
      }
      return this.appListData.filter((item) => {
        return item.Platform === this.filter
      })
    },
    uploadMessage () {
      return this.isError ? '只支持ipa或apk文件' : '拖拽文件到这里'
    },
    uploadClass () {
      return this.isError ? 'upload-error' : ''
    },
    showDialog () {
      return this.upload.file != null
    }
  },
  mounted () {
    this.getAppList()
  },
  methods: {
    // 获取APP列表
    async getAppList () {
      const resault = await this.$net.get('/app/list')
      if (resault.data) {
        this.appList = resault.data
        this.appList.push(...resault.data)
      }
    },
    onDropFile (files) {
      this.isError = false
      if (files.length > 0) {
        const file = files[0]
        if (
          !(
            file.name.endsWith('.ipa') ||
                        file.name.endsWith('.IPA') ||
                        file.name.endsWith('.apk') ||
                        file.name.endsWith('.APK')
          )
        ) {
          console.warn('只支持IPA文件')
          this.isError = true
          return
        }
        this.upload.file = files[0]
      }
    },
    cancelUpload () {
      this.upload.file = null
    },
    uploadSuccess () {
      this.upload.file = null
    },
    gotoAppDetail (platform, packageName) {
      this.$router.push(`/my_apps/${platform}/${packageName}`)
    }
  }
}
</script>

<style lang="scss" scoped>
  .upload-app {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
  .uploader {
    margin: 50px;
  }
  .upload-error {
    background: #ff8759;
    color: white;
  }
  .app-list {
    position: relative;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  .app {
    cursor: pointer;
    overflow: hidden;
    width: calc(30%);
    min-width: 300px;
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-radius: 20px;
    box-shadow: var(--shadow);
    transition: all 0.3s ease;

    &:hover {
      box-shadow: var(--shadow-hover);
      transform: translateY(-5px);
    }
    .icon {
      height: 150px;
      padding: 20px 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      background: radial-gradient(
        circle at 50%,
        rgb(83, 168, 255) 30%,
        rgb(55, 113, 172)
      );

      .icon-image {
        box-shadow: var(--shadow);
        width: 100px;
        height: 100px;
        margin: 10px auto;
        border-radius: 15px;
      }
      .icon-title {
        width: 100%;
        text-align: center;
        color: white;
        text-shadow: 0 0 2px rgba(0, 0, 0, 0.479);
      }
    }
    .title {
      text-align: left;
      margin-top: 20px;
      width: 100%;
      padding-left: 20px;
      font-size: 20px;
      font-weight: bold;
    }
    .info {
      width: calc(100% - 40px);
      padding: 20px;
      .el-row {
        color: var(--SubText);
      }
      .info-title {
        font-weight: bold;
      }
    }

    .platform-icon {
      width: 40px;
      height: 40px;
      margin-left: 10px;
    }
  }
  .filter {
    display: flex;
    height: 30px;
    margin: 50px 0;
    justify-content: center;
    gap: 20px;
  }
  .filter-item {
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80px;
    transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
    border-radius: 15px;
    &:hover {
      background-color: rgb(29, 113, 223);
      color: white;
      box-shadow: var(--shadow);
    }
  }
  .filter-item-select {
    background-color: var(--MainColor);
    color: white;
  }
</style>
